function renderStudent() {
  axios({
    url: '/students',
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(result => {
    // console.log(result)
    let newArr = result.data.data.map(item => {
      return `
      <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender ? '女' : '男'}</td>
      <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province} ${item.city} ${item.area}</td>
      <td>
      <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
      </td>
      </tr>
      
      `
    })
    document.querySelector('tbody').innerHTML = newArr.join('')
  })
}
renderStudent()

// -----------省市县---------------
let sheng = '<option value="">--省份--</option>'
let shi = '<option value="">--城市--</option>'
let xian = '<option value="">--地区--</option>'
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')
// 省
axios({
  url: '/api/province'
}).then(result => {
  let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
  province.innerHTML = sheng + newArr.join('')
})
// 市
province.addEventListener('change', function () {
  axios({
    url: '/api/city',
    params: {
      pname: province.value
    }
  }).then(result => {
    // console.log(result)
    let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = shi + newArr.join('')
  })
})
// 地区
city.addEventListener('change', function () {
  axios({
    url: '/api/area',
    params: {
      pname: province.value,
      cname: city.value
    }
  }).then(result => {
    // console.log(result)
    let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArr.join('')
  })
})


// -----------添加学员---------------
let addModal = new bootstrap.Modal(document.querySelector('#modal'))
document.querySelector('#openModal').addEventListener('click', function () {
  document.querySelector('h5.modal-title').innerHTML = '添加学员'
  addModal.show()

})
document.querySelector('#submit').addEventListener('click', function () {
  // 获取表单对象的值
  let data = val(document.querySelector('#form'))
  // 检查数据是否是我们需要的数据
  data.age = +data.age
  data.group = +data.group
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary

  if (document.querySelector('.modal-title').innerHTML === '添加学员') {
    axios({
      method: 'POST',
      url: '/students',
      data: data
    }).then(result => {
      message.success(result.data.message)
      document.querySelector('#form').reset()
      renderStudent()
      addModal.hide()
    })
  } else if (document.querySelector('.modal-title').innerHTML === '修改学员') {
    let id = document.querySelector('.modal-title').dataset.id
    axios({
      method: 'PUT',
      url: `/students/${id}`,
      data: data
    }).then(result => {
      message.success(result.data.message)
      document.querySelector('#form').reset()
      renderStudent()
      addModal.hide()
    })
  }

})

document.querySelector('tbody').addEventListener('click', async function (e) {
  // -----------删除学员---------------
  if (e.target.classList.contains('bi-trash')) {
    let id = e.target.dataset.id
    axios({
      url: `/students/${id}`,
      method: 'DELETE'
    }).then(result => {
      message.success('删除成功')
      renderStudent()
    })
  }

  // -----------编辑学员---------------
  if (e.target.classList.contains('bi-pen')) {
    let id = e.target.dataset.id
    document.querySelector('.modal-title').innerHTML = '修改学员'
    document.querySelector('.modal-title').setAttribute('data-id', id)
    addModal.show()
    let result = await axios({ url: `/students/${id}` })

    let res1 = await axios({
      url: '/api/city',
      params: {
        pname: result.data.data.province
      }
    })

    let res2 = await axios({
      url: '/api/area',
      params: {
        pname: result.data.data.province,
        cname: result.data.data.city
      }
    })
    let newArr1 = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = shi + newArr1.join('')

    let newArr2 = res2.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArr2.join('')
    // 数据回填,使用插件val(表单，数据)
    val(document.querySelector('#form'), result.data.data)
  }
})

document.querySelector('#logout').addEventListener('click', function () {

  localStorage.removeItem('token')
  setTimeout(() => {
    location.href = './login.html'
  }, 1500)
})
